<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>关于我们 - 黄淮学院校园活动管理系统</title>
    <!-- Tailwind CSS -->
    <script src="https://cdn.tailwindcss.com"></script>
    <!-- Font Awesome -->
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <!-- Chart.js -->
    <script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.8/dist/chart.umd.min.js"></script>
    <!-- 自定义配置 -->
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#165DFF',
                        secondary: '#0FC6C2',
                        success: '#00B42A',
                        warning: '#FF7D00',
                        danger: '#F53F3F',
                        info: '#86909C',
                        dark: '#1D2129',
                        light: '#F2F3F5'
                    },
                    fontFamily: {
                        sans: ['Inter', 'system-ui', 'sans-serif'],
                    },
                }
            }
        }
    </script>
    <style type="text/tailwindcss">
        @layer utilities {
            .content-auto {
                content-visibility: auto;
            }
            .card-hover {
                @apply transition-all duration-300 hover:shadow-lg hover:-translate-y-1;
            }
            .btn-primary {
                @apply bg-primary text-white px-4 py-2 rounded-lg hover:bg-primary/90 transition-all;
            }
            .btn-secondary {
                @apply bg-white border border-primary text-primary px-4 py-2 rounded-lg hover:bg-primary/5 transition-all;
            }
            .nav-item {
                @apply px-4 py-2 rounded-lg transition-all hover:bg-primary/10 cursor-pointer;
            }
            .nav-item-active {
                @apply bg-primary/10 text-primary font-medium;
            }
            .feature-card {
                @apply bg-white rounded-xl shadow-sm p-6 card-hover;
            }
            .stat-card {
                @apply bg-white rounded-xl shadow-sm p-6 text-center;
            }
            .timeline-item {
                @apply relative pl-8 pb-8;
            }
            .timeline-item::before {
                @apply absolute left-3 top-1 w-2 h-2 bg-primary rounded-full content-[''];
            }
            .timeline-item:not(:last-child)::after {
                @apply absolute left-3 top-3 w-0.5 h-[calc(100%-0.5rem)] bg-gray-200 content-[''];
            }
            .team-card {
                @apply bg-white rounded-xl shadow-sm overflow-hidden text-center;
            }
        }
    </style>
    <link rel="stylesheet" href="css/style.css">
</head>
<body class="bg-gray-50 text-dark">
    <!-- 顶部导航栏 -->
    <header id="navbar" class="fixed top-0 left-0 right-0 bg-white shadow-sm z-50 transition-all duration-300">
        <div class="container mx-auto px-4">
            <div class="flex items-center justify-between h-16">
                <!-- Logo -->
                <div class="flex items-center space-x-2">
                    <div class="w-10 h-10 bg-primary rounded-lg flex items-center justify-center">
                        <i class="fa fa-graduation-cap text-white text-xl"></i>
                    </div>
                    <div>
                        <h1 class="text-xl font-bold text-primary">黄淮学院</h1>
                        <p class="text-xs text-info">校园活动管理系统</p>
                    </div>
                </div>
                
                <!-- 导航链接 - 桌面端 -->
                <nav class="hidden md:flex items-center space-x-2">
                    <a href="index.html" class="nav-item">首页</a>
                    <a href="activities.html" class="nav-item">活动列表</a>
                    <a href="discover.html" class="nav-item">发现</a>
                    <a href="about.html" class="nav-item nav-item-active">关于我们</a>
                </nav>
                
                <!-- 用户操作 -->
                <div class="flex items-center space-x-4">
                    <button id="searchBtn" class="p-2 rounded-full hover:bg-gray-100 transition-all">
                        <i class="fa fa-search text-info"></i>
                    </button>
                    <button id="notificationsBtn" class="p-2 rounded-full hover:bg-gray-100 transition-all relative">
                        <i class="fa fa-bell text-info"></i>
                        <span class="absolute top-1 right-1 w-2 h-2 bg-danger rounded-full"></span>
                    </button>
                    <div id="userMenu" class="relative">
                        <button id="userMenuBtn" class="flex items-center space-x-2 hover:bg-gray-100 p-1 rounded-lg transition-all">
                            <img src="https://picsum.photos/id/1005/200/200" alt="用户头像" class="w-8 h-8 rounded-full object-cover border-2 border-primary/20">
                            <span class="hidden md:inline-block font-medium">游客</span>
                            <i class="fa fa-caret-down text-xs text-info"></i>
                        </button>
                        <!-- 用户下拉菜单 -->
                        <div id="userDropdown" class="absolute right-0 mt-2 w-48 bg-white rounded-lg shadow-lg py-2 z-50 hidden">
                            <a href="login.html" class="block px-4 py-2 text-sm hover:bg-gray-100 transition-all">
                                <i class="fa fa-sign-in mr-2 text-info"></i>登录
                            </a>
                            <a href="register.html" class="block px-4 py-2 text-sm hover:bg-gray-100 transition-all">
                                <i class="fa fa-user-plus mr-2 text-info"></i>注册
                            </a>
                        </div>
                    </div>
                    <!-- 移动端菜单按钮 -->
                    <button id="mobileMenuBtn" class="md:hidden p-2 rounded-lg hover:bg-gray-100 transition-all">
                        <i class="fa fa-bars text-info"></i>
                    </button>
                </div>
            </div>
        </div>
        
        <!-- 搜索框 -->
        <div id="searchBox" class="container mx-auto px-4 pb-4 hidden">
            <div class="relative">
                <input type="text" placeholder="搜索活动、主办方..." class="w-full pl-10 pr-4 py-2 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-primary/50">
                <i class="fa fa-search absolute left-3 top-1/2 transform -translate-y-1/2 text-info"></i>
            </div>
        </div>
        
        <!-- 移动端导航菜单 -->
        <div id="mobileMenu" class="md:hidden container mx-auto px-4 pb-4 hidden">
            <nav class="flex flex-col space-y-1">
                <a href="index.html" class="nav-item">首页</a>
                <a href="activities.html" class="nav-item">活动列表</a>
                <a href="discover.html" class="nav-item">发现</a>
                <a href="about.html" class="nav-item nav-item-active">关于我们</a>
                <div class="pt-2 flex space-x-2">
                    <a href="login.html" class="btn-primary flex-1 text-center">登录</a>
                    <a href="register.html" class="btn-secondary flex-1 text-center">注册</a>
                </div>
            </nav>
        </div>
    </header>

    <!-- 主要内容 -->
    <main class="container mx-auto px-4 pt-24 pb-16">
        <!-- 页面标题 -->
        <section class="mb-12">
            <h1 class="text-3xl font-bold mb-2">关于我们</h1>
            <p class="text-info">校园活动管理系统介绍与功能说明</p>
        </section>

        <!-- 系统介绍 -->
        <section class="mb-16">
            <div class="bg-white rounded-xl shadow-sm overflow-hidden">
                <div class="flex flex-col md:flex-row">
                    <div class="md:w-1/2 p-8 md:p-12">
                        <h2 class="text-2xl font-bold mb-6">系统介绍</h2>
                        <p class="text-gray-700 mb-4">黄淮学院校园活动管理系统是由学校信息技术中心开发的一站式活动服务平台，旨在为全校师生提供便捷、高效的活动信息查询、报名和管理服务。</p>
                        <p class="text-gray-700 mb-6">系统集成了活动发布、报名管理、数据分析等功能，支持多角色用户（学生、教师、管理员）使用，致力于提升校园活动的信息化管理水平和用户体验。</p>
                        <div class="flex flex-wrap gap-3">
                            <div class="flex items-center gap-2 bg-gray-50 px-4 py-2 rounded-lg">
                                <i class="fa fa-calendar-check-o text-primary"></i>
                                <span>便捷的活动报名</span>
                            </div>
                            <div class="flex items-center gap-2 bg-gray-50 px-4 py-2 rounded-lg">
                                <i class="fa fa-line-chart text-secondary"></i>
                                <span>数据化统计分析</span>
                            </div>
                            <div class="flex items-center gap-2 bg-gray-50 px-4 py-2 rounded-lg">
                                <i class="fa fa-bell text-warning"></i>
                                <span>实时消息通知</span>
                            </div>
                        </div>
                    </div>
                    <div class="md:w-1/2 bg-gray-100 flex items-center justify-center p-8">
                        <img src="https://picsum.photos/id/1033/600/400" alt="系统介绍" class="rounded-lg shadow-md max-w-full h-auto">
                    </div>
                </div>
            </div>
        </section>

        <!-- 系统功能模块 -->
        <section class="mb-16">
            <div class="text-center mb-12">
                <h2 class="text-2xl font-bold mb-3">系统功能模块</h2>
                <p class="text-info max-w-2xl mx-auto">校园活动管理系统包含七大核心模块，覆盖活动全生命周期管理</p>
            </div>
            
            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
                <!-- 模块1 -->
                <div class="feature-card border-t-4 border-primary">
                    <div class="w-14 h-14 rounded-full bg-primary/10 flex items-center justify-center mb-4">
                        <i class="fa fa-calendar text-primary text-2xl"></i>
                    </div>
                    <h3 class="text-xl font-bold mb-2">活动发布管理</h3>
                    <p class="text-gray-600 mb-4">支持活动发布者创建、编辑、删除活动信息，设置报名条件、时间、地点等详细信息。</p>
                    <ul class="space-y-2 text-gray-600 text-sm">
                        <li class="flex items-center"><i class="fa fa-check text-success mr-2"></i> 富文本编辑器支持</li>
                        <li class="flex items-center"><i class="fa fa-check text-success mr-2"></i> 多图上传与展示</li>
                        <li class="flex items-center"><i class="fa fa-check text-success mr-2"></i> 活动分类与标签</li>
                    </ul>
                </div>
                
                <!-- 模块2 -->
                <div class="feature-card border-t-4 border-secondary">
                    <div class="w-14 h-14 rounded-full bg-secondary/10 flex items-center justify-center mb-4">
                        <i class="fa fa-user-o text-secondary text-2xl"></i>
                    </div>
                    <h3 class="text-xl font-bold mb-2">用户报名管理</h3>
                    <p class="text-gray-600 mb-4">提供便捷的活动报名流程，支持用户查看报名状态、取消报名等操作。</p>
                    <ul class="space-y-2 text-gray-600 text-sm">
                        <li class="flex items-center"><i class="fa fa-check text-success mr-2"></i> 一键报名功能</li>
                        <li class="flex items-center"><i class="fa fa-check text-success mr-2"></i> 报名信息采集</li>
                        <li class="flex items-center"><i class="fa fa-check text-success mr-2"></i> 报名状态通知</li>
                    </ul>
                </div>
                
                <!-- 模块3 -->
                <div class="feature-card border-t-4 border-warning">
                    <div class="w-14 h-14 rounded-full bg-warning/10 flex items-center justify-center mb-4">
                        <i class="fa fa-search text-warning text-2xl"></i>
                    </div>
                    <h3 class="text-xl font-bold mb-2">活动发现与搜索</h3>
                    <p class="text-gray-600 mb-4">智能推荐算法，帮助用户发现感兴趣的活动，并提供多维度的活动搜索功能。</p>
                    <ul class="space-y-2 text-gray-600 text-sm">
                        <li class="flex items-center"><i class="fa fa-check text-success mr-2"></i> 个性化推荐</li>
                        <li class="flex items-center"><i class="fa fa-check text-success mr-2"></i> 多条件筛选</li>
                        <li class="flex items-center"><i class="fa fa-check text-success mr-2"></i> 关键词搜索</li>
                    </ul>
                </div>
                
                <!-- 模块4 -->
                <div class="feature-card border-t-4 border-success">
                    <div class="w-14 h-14 rounded-full bg-success/10 flex items-center justify-center mb-4">
                        <i class="fa fa-line-chart text-success text-2xl"></i>
                    </div>
                    <h3 class="text-xl font-bold mb-2">数据分析与统计</h3>
                    <p class="text-gray-600 mb-4">提供活动数据的可视化统计分析，帮助活动组织者了解活动效果和参与情况。</p>
                    <ul class="space-y-2 text-gray-600 text-sm">
                        <li class="flex items-center"><i class="fa fa-check text-success mr-2"></i> 实时数据更新</li>
                        <li class="flex items-center"><i class="fa fa-check text-success mr-2"></i> 多维度统计图表</li>
                        <li class="flex items-center"><i class="fa fa-check text-success mr-2"></i> 数据导出功能</li>
                    </ul>
                </div>
                
                <!-- 模块5 -->
                <div class="feature-card border-t-4 border-danger">
                    <div class="w-14 h-14 rounded-full bg-danger/10 flex items-center justify-center mb-4">
                        <i class="fa fa-comment-o text-danger text-2xl"></i>
                    </div>
                    <h3 class="text-xl font-bold mb-2">互动交流社区</h3>
                    <p class="text-gray-600 mb-4">提供活动评论、分享等互动功能，增强用户参与感和社区氛围。</p>
                    <ul class="space-y-2 text-gray-600 text-sm">
                        <li class="flex items-center"><i class="fa fa-check text-success mr-2"></i> 活动评论功能</li>
                        <li class="flex items-center"><i class="fa fa-check text-success mr-2"></i> 社交媒体分享</li>
                        <li class="flex items-center"><i class="fa fa-check text-success mr-2"></i> 点赞收藏功能</li>
                    </ul>
                </div>
                
                <!-- 模块6 -->
                <div class="feature-card border-t-4 border-info">
                    <div class="w-14 h-14 rounded-full bg-info/10 flex items-center justify-center mb-4">
                        <i class="fa fa-bell text-info text-2xl"></i>
                    </div>
                    <h3 class="text-xl font-bold mb-2">消息通知系统</h3>
                    <p class="text-gray-600 mb-4">及时推送活动相关通知，包括报名成功、活动提醒、状态更新等。</p>
                    <ul class="space-y-2 text-gray-600 text-sm">
                        <li class="flex items-center"><i class="fa fa-check text-success mr-2"></i> 站内消息提醒</li>
                        <li class="flex items-center"><i class="fa fa-check text-success mr-2"></i> 重要通知推送</li>
                        <li class="flex items-center"><i class="fa fa-check text-success mr-2"></i> 活动日历提醒</li>
                    </ul>
                </div>
                
                <!-- 模块7 -->
                <div class="feature-card border-t-4 border-purple-500 md:col-span-2 lg:col-span-1">
                    <div class="w-14 h-14 rounded-full bg-purple-100 flex items-center justify-center mb-4">
                        <i class="fa fa-cog text-purple-500 text-2xl"></i>
                    </div>
                    <h3 class="text-xl font-bold mb-2">系统管理与配置</h3>
                    <p class="text-gray-600 mb-4">提供完善的后台管理功能，支持用户管理、权限控制、系统配置等操作。</p>
                    <ul class="space-y-2 text-gray-600 text-sm">
                        <li class="flex items-center"><i class="fa fa-check text-success mr-2"></i> 多角色权限管理</li>
                        <li class="flex items-center"><i class="fa fa-check text-success mr-2"></i> 系统参数配置</li>
                        <li class="flex items-center"><i class="fa fa-check text-success mr-2"></i> 数据备份恢复</li>
                    </ul>
                </div>
            </div>
        </section>

        <!-- 发展历程 -->
        <section class="mb-16">
            <div class="text-center mb-12">
                <h2 class="text-2xl font-bold mb-3">发展历程</h2>
                <p class="text-info max-w-2xl mx-auto">校园活动管理系统的建设与发展历程</p>
            </div>
            
            <div class="bg-white rounded-xl shadow-sm p-8">
                <div class="max-w-3xl mx-auto">
                    <!-- 时间线项目 -->
                    <div class="timeline-item">
                        <div class="text-primary font-bold text-lg mb-1">2023年9月</div>
                        <div class="text-gray-700 mb-1">系统正式上线运行</div>
                        <p class="text-sm text-gray-600">校园活动管理系统1.0版本正式上线，支持基本的活动发布和报名功能。</p>
                    </div>
                    
                    <div class="timeline-item">
                        <div class="text-primary font-bold text-lg mb-1">2023年6月</div>
                        <div class="text-gray-700 mb-1">系统测试与优化</div>
                        <p class="text-sm text-gray-600">完成系统内部测试，收集用户反馈，进行功能优化和性能提升。</p>
                    </div>
                    
                    <div class="timeline-item">
                        <div class="text-primary font-bold text-lg mb-1">2023年3月</div>
                        <div class="text-gray-700 mb-1">系统开发完成</div>
                        <p class="text-sm text-gray-600">完成系统核心功能开发，包括活动发布、报名管理、数据分析等模块。</p>
                    </div>
                    
                    <div class="timeline-item">
                        <div class="text-primary font-bold text-lg mb-1">2022年12月</div>
                        <div class="text-gray-700 mb-1">项目启动</div>
                        <p class="text-sm text-gray-600">校园活动管理系统项目正式启动，成立开发团队，开始需求分析和系统设计。</p>
                    </div>
                    
                    <div class="timeline-item pb-0">
                        <div class="text-primary font-bold text-lg mb-1">2022年10月</div>
                        <div class="text-gray-700 mb-1">项目规划</div>
                        <p class="text-sm text-gray-600">学校信息技术中心开始规划校园活动管理系统，明确建设目标和功能需求。</p>
                    </div>
                </div>
            </div>
        </section>

        <!-- 系统优势 -->
        <section class="mb-16">
            <div class="text-center mb-12">
                <h2 class="text-2xl font-bold mb-3">系统优势</h2>
                <p class="text-info max-w-2xl mx-auto">校园活动管理系统的核心优势和价值</p>
            </div>
            
            <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
                <div class="space-y-6">
                    <div class="flex gap-4">
                        <div class="w-12 h-12 rounded-full bg-primary/10 flex items-center justify-center shrink-0">
                            <i class="fa fa-tachometer text-primary"></i>
                        </div>
                        <div>
                            <h3 class="font-bold text-lg mb-1">高效便捷</h3>
                            <p class="text-gray-600">简化活动发布和报名流程，提高工作效率，减少人工操作。</p>
                        </div>
                    </div>
                    
                    <div class="flex gap-4">
                        <div class="w-12 h-12 rounded-full bg-secondary/10 flex items-center justify-center shrink-0">
                            <i class="fa fa-mobile text-secondary"></i>
                        </div>
                        <div>
                            <h3 class="font-bold text-lg mb-1">移动友好</h3>
                            <p class="text-gray-600">响应式设计，支持多终端访问，随时随地查看和管理活动。</p>
                        </div>
                    </div>
                    
                    <div class="flex gap-4">
                        <div class="w-12 h-12 rounded-full bg-success/10 flex items-center justify-center shrink-0">
                            <i class="fa fa-shield text-success"></i>
                        </div>
                        <div>
                            <h3 class="font-bold text-lg mb-1">安全可靠</h3>
                            <p class="text-gray-600">完善的用户认证和权限管理机制，保障数据安全和隐私。</p>
                        </div>
                    </div>
                </div>
                
                <div class="space-y-6">
                    <div class="flex gap-4">
                        <div class="w-12 h-12 rounded-full bg-warning/10 flex items-center justify-center shrink-0">
                            <i class="fa fa-paint-brush text-warning"></i>
                        </div>
                        <div>
                            <h3 class="font-bold text-lg mb-1">界面美观</h3>
                            <p class="text-gray-600">现代化设计风格，简洁直观的操作界面，提供良好的用户体验。</p>
                        </div>
                    </div>
                    
                    <div class="flex gap-4">
                        <div class="w-12 h-12 rounded-full bg-danger/10 flex items-center justify-center shrink-0">
                            <i class="fa fa-pie-chart text-danger"></i>
                        </div>
                        <div>
                            <h3 class="font-bold text-lg mb-1">数据分析</h3>
                            <p class="text-gray-600">强大的数据分析功能，提供活动效果评估和决策支持。</p>
                        </div>
                    </div>
                    
                    <div class="flex gap-4">
                        <div class="w-12 h-12 rounded-full bg-info/10 flex items-center justify-center shrink-0">
                            <i class="fa fa-cogs text-info"></i>
                        </div>
                        <div>
                            <h3 class="font-bold text-lg mb-1">灵活定制</h3>
                            <p class="text-gray-600">支持根据不同需求进行功能扩展和定制，适应多样化场景。</p>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <!-- 联系我们 -->
        <section>
            <div class="bg-white rounded-xl shadow-sm overflow-hidden">
                <div class="flex flex-col md:flex-row">
                    <div class="md:w-1/2 bg-primary p-8 md:p-12 text-white">
                        <h2 class="text-2xl font-bold mb-6">联系我们</h2>
                        <p class="mb-6">如有任何问题或建议，请随时联系我们。我们将竭诚为您服务！</p>
                        
                        <div class="space-y-4">
                            <div class="flex items-start gap-3">
                                <i class="fa fa-map-marker mt-1 text-white/80"></i>
                                <div>
                                    <div class="font-medium mb-1">办公地址</div>
                                    <div class="text-white/80 text-sm">河南省驻马店市开源大道6号黄淮学院信息技术中心</div>
                                </div>
                            </div>
                            
                            <div class="flex items-start gap-3">
                                <i class="fa fa-phone mt-1 text-white/80"></i>
                                <div>
                                    <div class="font-medium mb-1">联系电话</div>
                                    <div class="text-white/80 text-sm">0396-2853611</div>
                                </div>
                            </div>
                            
                            <div class="flex items-start gap-3">
                                <i class="fa fa-envelope mt-1 text-white/80"></i>
                                <div>
                                    <div class="font-medium mb-1">电子邮箱</div>
                                    <div class="text-white/80 text-sm">system@huanghuai.edu.cn</div>
                                </div>
                            </div>
                            
                            <div class="flex items-start gap-3">
                                <i class="fa fa-clock-o mt-1 text-white/80"></i>
                                <div>
                                    <div class="font-medium mb-1">工作时间</div>
                                    <div class="text-white/80 text-sm">周一至周五 8:00-17:30</div>
                                </div>
                            </div>
                        </div>
                        
                        <div class="mt-8">
                            <div class="font-medium mb-3">关注我们</div>
                            <div class="flex space-x-4">
                                <a href="#" class="w-10 h-10 rounded-full bg-white/20 flex items-center justify-center hover:bg-white/30 transition-all">
                                    <i class="fa fa-weibo"></i>
                                </a>
                                <a href="#" class="w-10 h-10 rounded-full bg-white/20 flex items-center justify-center hover:bg-white/30 transition-all">
                                    <i class="fa fa-wechat"></i>
                                </a>
                                <a href="#" class="w-10 h-10 rounded-full bg-white/20 flex items-center justify-center hover:bg-white/30 transition-all">
                                    <i class="fa fa-qq"></i>
                                </a>
                            </div>
                        </div>
                    </div>
                    
                    <div class="md:w-1/2 p-8 md:p-12">
                        <h2 class="text-2xl font-bold mb-6">留言反馈</h2>
                        <form>
                            <div class="space-y-4">
                                <div>
                                    <label for="name" class="block text-sm font-medium text-gray-700 mb-1">姓名</label>
                                    <input type="text" id="name" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary transition-all" placeholder="请输入您的姓名">
                                </div>
                                
                                <div>
                                    <label for="email" class="block text-sm font-medium text-gray-700 mb-1">邮箱</label>
                                    <input type="email" id="email" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary transition-all" placeholder="请输入您的邮箱">
                                </div>
                                
                                <div>
                                    <label for="subject" class="block text-sm font-medium text-gray-700 mb-1">主题</label>
                                    <select id="subject" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary transition-all">
                                        <option value="">请选择反馈主题</option>
                                        <option value="suggestion">功能建议</option>
                                        <option value="bug">问题反馈</option>
                                        <option value="cooperation">合作咨询</option>
                                        <option value="other">其他问题</option>
                                    </select>
                                </div>
                                
                                <div>
                                    <label for="message" class="block text-sm font-medium text-gray-700 mb-1">留言内容</label>
                                    <textarea id="message" rows="4" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary transition-all" placeholder="请输入您的留言内容..."></textarea>
                                </div>
                                
                                <button type="submit" class="btn-primary w-full">提交留言</button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </section>
    </main>

    <!-- 页脚 -->
    <footer class="bg-dark text-white py-12">
        <div class="container mx-auto px-4">
            <div class="grid grid-cols-1 md:grid-cols-4 gap-8 mb-8">
                <div>
                    <div class="flex items-center space-x-2 mb-4">
                        <div class="w-10 h-10 bg-white rounded-lg flex items-center justify-center">
                            <i class="fa fa-graduation-cap text-primary text-xl"></i>
                        </div>
                        <h3 class="text-xl font-bold">黄淮学院</h3>
                    </div>
                    <p class="text-gray-400 text-sm mb-4">校园活动管理系统致力于为全校师生提供便捷的活动信息服务平台。</p>
                    <div class="flex space-x-4">
                        <a href="#" class="w-8 h-8 rounded-full bg-white/10 flex items-center justify-center hover:bg-primary transition-all">
                            <i class="fa fa-weibo"></i>
                        </a>
                        <a href="#" class="w-8 h-8 rounded-full bg-white/10 flex items-center justify-center hover:bg-primary transition-all">
                            <i class="fa fa-wechat"></i>
                        </a>
                        <a href="#" class="w-8 h-8 rounded-full bg-white/10 flex items-center justify-center hover:bg-primary transition-all">
                            <i class="fa fa-qq"></i>
                        </a>
                    </div>
                </div>
                <div>
                    <h4 class="text-lg font-medium mb-4">快速链接</h4>
                    <ul class="space-y-2 text-gray-400">
                        <li><a href="index.html" class="hover:text-white transition-all">首页</a></li>
                        <li><a href="activities.html" class="hover:text-white transition-all">活动列表</a></li>
                        <li><a href="discover.html" class="hover:text-white transition-all">发现</a></li>
                        <li><a href="about.html" class="hover:text-white transition-all">关于我们</a></li>
                    </ul>
                </div>
                <div>
                    <h4 class="text-lg font-medium mb-4">帮助中心</h4>
                    <ul class="space-y-2 text-gray-400">
                        <li><a href="faq.html" class="hover:text-white transition-all">常见问题</a></li>
                        <li><a href="contact.html" class="hover:text-white transition-all">联系我们</a></li>
                        <li><a href="privacy.html" class="hover:text-white transition-all">隐私政策</a></li>
                        <li><a href="terms.html" class="hover:text-white transition-all">用户协议</a></li>
                    </ul>
                </div>
                <div>
                    <h4 class="text-lg font-medium mb-4">联系我们</h4>
                    <ul class="space-y-3 text-gray-400">
                        <li class="flex items-start">
                            <i class="fa fa-map-marker mt-1 mr-3"></i>
                            <span>河南省驻马店市开源大道6号黄淮学院</span>
                        </li>
                        <li class="flex items-center">
                            <i class="fa fa-phone mr-3"></i>
                            <span>0396-2853611</span>
                        </li>
                        <li class="flex items-center">
                            <i class="fa fa-envelope mr-3"></i>
                            <span>contact@huanghuai.edu.cn</span>
                        </li>
                    </ul>
                </div>
            </div>
            <div class="pt-8 border-t border-white/10 text-center text-gray-500 text-sm">
                <p>© 2023 黄淮学院校园活动管理系统 版权所有</p>
            </div>
        </div>
    </footer>

    <!-- 回到顶部按钮 -->
    <button id="backToTop" class="fixed bottom-8 right-8 w-12 h-12 rounded-full bg-primary text-white shadow-lg flex items-center justify-center opacity-0 invisible transition-all">
        <i class="fa fa-angle-up text-xl"></i>
    </button>

    <!-- JavaScript -->
    <script src="js/main.js"></script>
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            // 表单提交处理
            const feedbackForm = document.querySelector('form');
            if (feedbackForm) {
                feedbackForm.addEventListener('submit', function(e) {
                    e.preventDefault();
                    
                    // 简单的表单验证
                    const name = document.getElementById('name').value;
                    const email = document.getElementById('email').value;
                    const subject = document.getElementById('subject').value;
                    const message = document.getElementById('message').value;
                    
                    if (!name || !email || !subject || !message) {
                        alert('请填写完整的留言信息');
                        return;
                    }
                    
                    // 模拟提交成功
                    alert('留言提交成功，感谢您的反馈！');
                    feedbackForm.reset();
                });
            }
        });
    </script>
</body>
</html>